<template>
  <!-- 头程物流跟踪 -->
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm
          :fieldList="fieldList"
          :formOption="optionsData"
          :formData="form"
        >
          <template #queryNo="{ input, value }">
            <VBatchInput
              @update:model-value="input"
              :model-value="value"
              placeholder="请输入"
              class="w-60"
              @search="refresh"
            />
          </template>
        </XForm>
      </template>
      <template #toolbar_btns>
        <VActionBar :actions="actions" />
      </template>
      <template #delivery_status="{ row }">
        <DeliveryStatus :data="row" />
      </template>
      <template #error_status_info="{ row }">
        <div>
          <VText title="物流状态" :value="row?.sku_track_node_status_text" />
          <div class="text-[red]" v-if="trackStandard">
            异常(标准): {{ row?.error_status_info_standard }}
          </div>
          <div class="text-[red]" v-if="trackAvg">
            异常(平均): {{ row?.error_status_info }}
          </div>
        </div>
      </template>
      <template #pod="{ row }">
        <NoNumberLog :data="row?.sku_pod" title="POD" />
      </template>
      <template #operation="{ row }">
        <el-button
          link
          type="primary"
          @click="handleUploadPod(row)"
          v-hasPermi="[logisticsManageAuthList.track_initial.pod]"
          >上传POD</el-button
        >
      </template>
    </VTable>
    <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
    <importDialog ref="importDialogRef" @refresh="refresh" />
    <singleUpload
      ref="singleUploadRef"
      :limit="10"
      @refresh="refresh"
      :title="titlePod"
    />
  </VPage>
</template>
<script setup lang="jsx">
import XForm from "@/components/XForm/index.vue";
import DerivedCenter from "@/components/DerivedCenter";
import importDialog from "@/components/importDialog/index.vue";
import { config_name } from "@/config/export.js";
import { getTableSelectRow, getTableSelect } from "@/hooks/tool.js";
import { getChannelList, getCountry } from "@/api/index.js";
import { trackList } from "./api/index.js";
import { logisticsManageAuthList } from "@/Auth/logistics-manage.js";
// import { delivery_status_data } from "./data.js";
import singleUpload from "@/components/singleUpload/index.vue";
import NoNumberLog from "@/components/NoNumberLog/index.vue";
import { ElMessageBox } from "element-plus";
import { handleLink } from "@/hooks/tool.js";
import DeliveryStatus from "./components/deliveryStatus/index";
import { isPermission } from "@/hooks/permission.js";
import { useEnumSelect } from "@/hooks/useEnumSelect.js";
import VBatchInput from '@/componentsPublic/BatchInput/index.vue'
const trackStandard = computed(() =>
  isPermission(["/tms/logistics-manage/track-initial/standard"])
);
const trackAvg = computed(() =>
  isPermission(["/tms/logistics-manage/track-initial/avg"])
);
const { proxy } = getCurrentInstance();
const tableRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {
      numberNo: "",
      channel_id: "",
      destination_country: "",
      dateRange: { type: "receipt_date", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  rowConfig: {
    height: 170,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      title: "头程备库单信息",
      width: 300,
      fixed: "left",
      field: "customer_order_no",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText title="客户订单号" value={row?.customer_order_no} copy />
              <VText title="FBA code" value={row?.fba_code} copy />
              <VText title="配货单号" value={row?.ph_number} copy />
              <VText title="sku" value={row?.sku} copy />
              <VText title="渠道名称" value={row?.channel_name} />
              <VText
                title="国家-仓点"
                value={`${row?.destination_country} - ${row?.wp_code}`}
              />
            </div>
          );
        },
      },
    },
    {
      title: "物流单号",
      width: 300,
      field: "tracking_number",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText title="物流单号" value={row?.tracking_number} copy />
              <VText title="快递单号" value={row?.kd_number} copy />
            </div>
          );
        },
      },
    },
    // { title: "FBA code", width: 160, field: "fba_code" },
    // { title: "配货单号", width: 160, field: "ph_number" },

    // { title: "快递单号", width: 180, field: "kd_number" },
    // { title: "sku", width: 180, field: "sku" },
    {
      title: "运输信息",
      width: 200,
      field: "transport_type_text",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText title="运输类型" value={row?.transport_type_text} />
              <VText title="柜号" value={row?.cabinet_number} />
              <VText title="船名" value={row?.vessel_name} />
              <VText title="起运港" value={row?.port_of_start} />
              <VText title="靠岸港口" value={row?.port_of_call} />
            </div>
          );
        },
      },
    },
    // { title: "柜号", width: 180, field: "cabinet_number" },
    // { title: "船名", width: 180, field: "vessel_name" },
    // { title: "起运港", width: 180, field: "port_of_start" },
    // { title: "靠岸港口", width: 180, field: "port_of_call" },
    { title: "是否查验", width: 180, field: "check_status_text" },
    {
      title: "状态",
      width: 200,
      field: "error_status_info",
      slots: { default: "error_status_info" },
    },
    {
      title: "当前轨迹",
      width: 160,
      field: "sku_current_track",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div class="mb-[8px]">
                {row?.is_track_maintain_days ? (
                  <el-tag type="danger">请维护轨迹</el-tag>
                ) : (
                  ""
                )}
              </div>
              <div>{row?.sku_current_track || "-"}</div>
            </div>
          );
        },
      },
    },
    { title: "POD", width: 160, field: "pod", slots: { default: "pod" } },
    {
      title: "物流状态",
      width: 1100,
      slots: { default: "delivery_status" },
    },
    {
      fixed: "right",
      title: "操作",
      width: 90,
      slots: {
        default: "operation",
      },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return handleReq({ ...page, ...form });
      },
    },
  },
});
const handleReq = async (form) => {
  const { data, total } = await trackList(form);
  // data.forEach((item) => {
  //   const foundIndex = [...delivery_status_data]
  //     .reverse()
  //     .findIndex(({ reality }) => item[reality]);
  //   if (foundIndex !== -1) {
  //     const originalIndex = delivery_status_data.length - 1 - foundIndex;
  //     item.status_order = originalIndex + 1;
  //   } else {
  //     item.status_order = 0;
  //   }
  // });
  return {
    data,
    total,
  };
};
const { options: optionsData } = useEnumSelect({
  params: [
    "channel_type",
    "transport_type",
    "tc_track_check_status",
    "tc_track_node_status",
  ],
});
// const optionsData = reactive({});
// const getChannel = async () => {
//   const { data } = await getChannelList();
//   optionsData.channel = data;
// };
// getChannel();
// const getCountryList = async () => {
//   const { data } = await getCountry();
//   optionsData.country = data;
// };
// getCountryList();
//导出中心
const DerivedCenterRef = ref();
const handleExport = () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value?.open({
    tag_name: config_name["logistics_manage"]["initial_track"],
    condition,
  });
};
const titlePod = ref("");
const singleUploadRef = ref();
const handleUploadPod = (item) => {
  titlePod.value = "上传POD";
  singleUploadRef.value.open({
    urlType: "/tracking/tc-ls/upload-sku-pod",
    params: { item_id: item.item_id },
  });
};
const handleBatchPod = () => {
  titlePod.value = "批量上传POD";
  singleUploadRef.value.open({
    urlType: "/tracking/tc-ls/batch-upload-pod",
    batch_tip: true,
    tip: "上传规则,物流单号+POD",
  });
};
const refresh = () => {
  tableRef?.value.query()
};
const publicStyle = { style: { width: "300px" } };
const fieldList = [
  {
    field: "numberNo",
    placeholder: "请输入",
    select: [
      { label: "物流商单号", value: "tracking_number" },
      { label: "客户订单号", value: "customer_order_no" },
      { label: "配货单号", value: "ph_number" },
      { label: "FBAcode", value: "fba_code" },
      { label: "sku", value: "sku" },
    ],
    selectStyle: { width: "120px" },
    slot: "queryNo",
  },
  // {
  //   field: "channel_name",
  //   type: "input",
  //   placeholder: "渠道类型",
  // },
  {
    field: "transport_type",
    type: "select",
    originOption: "transport_type",
    multiple: true,
    options: {
      placeholder: "运输类型",
    },
    class: "select-wrapper-style",
    style: { width: "200px" },
  },
  {
    field: "check_status",
    type: "select",
    originOption: "tc_track_check_status",
    multiple: true,
    options: {
      placeholder: "是否查验",
    },
    class: "select-wrapper-style",
    style: { width: "200px" },
  },
  {
    field: "sku_track_node_status",
    type: "select",
    originOption: "tc_track_node_status",
    multiple: true,
    options: {
      placeholder: "物流状态",
    },
    class: "select-wrapper-style",
    style: { width: "200px" },
  },
  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    select: [
      { label: "收货日期", value: "receipt_time" },
      { label: "交运日期", value: "delivery_time" },
      { label: "到港日期", value: "arrival_time" },
      { label: "提取日期", value: "withdrawal_time" },
      { label: "签收日期", value: "signing_time" },
    ],
    selectStyle: { width: "100px" },
    itemProps: {
      startPlaceholder: "最早时间",
      endPlaceholder: "最晚时间",
    },
  },
];
const importDialogRef = ref();
const handleImport = () => {
  importDialogRef.value?.open({
    type: "tcLsTracking",
    urlType: "/tracking/tc-ls/import-tracking",
  });
};
const actions = [
  {
    label: "批量上传POD",
    fn: handleBatchPod,
    permission: [logisticsManageAuthList.track_initial.pod],
  },
  {
    label: "导入",
    dkicon: "icon-Download",
    fn: handleImport,
    right: true,
    permission: [logisticsManageAuthList.track_initial.import],
  },
  {
    label: "导出",
    dkicon: "icon-Upload",
    fn: handleExport,
    right: true,
    permission: [logisticsManageAuthList.track_initial.export],
  },
];
</script>
<style lang="scss" scoped></style>
